<!DOCTYPE html>
<html lang="en">

<head>
    <title>Datta Able - Most Complete Bootstrap Admin Template</title>
    <!-- HTML5 Shim and Respond.js IE10 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 10]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Datta Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
    <meta name="keywords" content="admin templates, bootstrap admin templates, bootstrap 4, dashboard, dashboard templets, sass admin templets, html admin templates, responsive, bootstrap admin templates free download,premium bootstrap admin templates, datta able, datta able bootstrap admin template">
    <meta name="author" content="Codedthemes" />

    <!-- Favicon icon -->
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
    <!-- fontawesome icon -->
    <link rel="stylesheet" href="assets/fonts/fontawesome/css/fontawesome-all.min.css">

    <!-- ======================= -->
    <!-- ======= PLUGIN CSS ===== -->
    <!-- ======================= -->

    <!-- animation css -->
    <link rel="stylesheet" href="assets/plugins/animation/css/animate.min.css">
    <!-- prism css -->
    <link rel="stylesheet" href="assets/plugins/prism/css/prism.min.css">
    <!-- vendor css -->
    <link rel="stylesheet" href="assets/css/style.css">

    <style>.docs-page-header {
        	font-weight: 400;
        	font-size: 27px;
        	margin: 0;
        	padding: 15px 50px;
        	line-height:40px;
        	height: 70px;
        }
        .docs-page-header.bg-dark {
            background-color: rgb(63, 77, 103) !important;
        }

        .docs-header-path {
        	opacity: 1;
        }
        .docs-wrapper {
        	min-height: calc(100vh - 70px);
        	position: relative;
        }

        .docs-inner {
        	padding: 40px;
        }

        .docs-sections {
        	position: fixed;
        	top: 70px;
        	left: 0;
        	bottom: 0;
        	overflow: hidden;
        }

        .docs-sections-inner {
        	padding-top: 32px;
        	padding-left: 32px;
        	padding-right:32px;
        	margin: 0;
        }

        .docs-sections-inner>li:first-child {
        	padding-top: 0 !important;
        }

        .docs-sections-inner li {
        	list-style: none;
        	padding: 5px 0;
        	margin: 0;
        	font-size:14px;
        }

        .docs-sections,
        .docs-sections a,
        .docs-sections a:focus,
        .docs-sections a:active {
        	color: #6c757d;
        	line-height: 1.3;
            padding: 0;
        }

        .docs-sections a:hover {
        	color: #333;
            position:relative;
        }

        .docs-sections a.active {
        	color: #333;
        	font-weight: bold;
            position:relative;
        }
        .docs-sections a.active:before , .docs-sections a:hover:before {
            content: "";
            position: absolute;
            width: 5px;
            height: 5px;
            background: #000;
            border-radius: 50%;
            top: 8px;
            left: -15px;
        }

        .docs-page-header,
        .docs-wrapper {
        	min-width: 1200px;
        }

        .docs-sections {
        	width: 230px;
            background: rgba(63, 77, 103, 0.05);
        }

        .docs-wrapper {
        	padding-left: 230px;
        }

        h2.docs-header {
        	margin-bottom:32px;
        	font-size: 24px;
        	position: relative;
        }

        h2.docs-header~h2.docs-header {
        	margin-top: 50px;
        }
    </style>

    <!--  <link rel="stylesheet" class="rtl-css" href="assets/css/layouts/rtl.css"> -->

    <!-- ======================= -->
    <!-- ======= PLUGIN JS ===== -->
    <!-- ======================= -->

    <script src="assets/js/vendor-all.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- highlight.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script src="assets/plugins/clipboard/js/clipboard.js"></script>
    <!-- prism Js -->
    <script src="assets/plugins/prism/js/prism.min.js"></script>


</head>

<body>
    <h2 class="docs-page-header bg-dark text-white">
        <span class="docs-header-path">Basic Components</span>
    </h2>
    <div class="docs-wrapper">
        <div class="docs-sections">
            <ul class="docs-sections-inner">
                <li class="nav-item"><a class="nav-link active" href="#page-alert">Alert</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-badge">Badges</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-button">Button</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-breadcrumb">Breadcrumbs & Pagination</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-modal">Modal</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-card">Card</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-collapse">Collapse</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-carousel">Carousel</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-grid">Grid</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-progress">Progress</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-tab">Navs & Tabs</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-typography">Typography</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-tooltip">Tooltip & Popover</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-spinner">Spinner</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-toasts">Toasts</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-border">Border</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-extra">Extra</a></li>
            </ul>
        </div>
        <div class="docs-inner">
            <h2 class="docs-header" id="page-alert">Alert</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Alerts</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-primary" role="alert">
                                A simple primary alert—check it out!
                            </div>
                            <div class="alert alert-secondary" role="alert">
                                A simple secondary alert—check it out!
                            </div>
                            <div class="alert alert-success" role="alert">
                                A simple success alert—check it out!
                            </div>
                            <div class="alert alert-danger" role="alert">
                                A simple danger alert—check it out!
                            </div>
                            <div class="alert alert-warning" role="alert">
                                A simple warning alert—check it out!
                            </div>
                            <div class="alert alert-info" role="alert">
                                A simple info alert—check it out!
                            </div>
                            <div class="alert alert-light" role="alert">
                                A simple light alert—check it out!
                            </div>
                            <div class="alert alert-dark" role="alert">
                                A simple dark alert—check it out!
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Link Alerts</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-primary" role="alert">
                                A simple primary alert with <a href="#!" class="alert-link">an example link</a>. Give it a click if you like.
                            </div>
                            <div class="alert alert-secondary" role="alert">
                                A simple secondary alert with <a href="#!" class="alert-link">an example link</a>. Give it a click if you like.
                            </div>
                            <div class="alert alert-success" role="alert">
                                A simple success alert with <a href="#!" class="alert-link">an example link</a>. Give it a click if you like.
                            </div>
                            <div class="alert alert-danger" role="alert">
                                A simple danger alert with <a href="#!" class="alert-link">an example link</a>. Give it a click if you like.
                            </div>
                            <div class="alert alert-warning" role="alert">
                                A simple warning alert with <a href="#!" class="alert-link">an example link</a>. Give it a click if you like.
                            </div>
                            <div class="alert alert-info" role="alert">
                                A simple info alert with <a href="#!" class="alert-link">an example link</a>. Give it a click if you like.
                            </div>
                            <div class="alert alert-light" role="alert">
                                A simple light alert with <a href="#!" class="alert-link">an example link</a>. Give it a click if you like.
                            </div>
                            <div class="alert alert-dark" role="alert">
                                A simple dark alert with <a href="#!" class="alert-link">an example link</a>. Give it a click if you like.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Dismissing</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-primary alert-dismissible fade show" role="alert">
                                <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="alert alert-secondary alert-dismissible fade show" role="alert">
                                <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="alert alert-info alert-dismissible fade show" role="alert">
                                <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="alert alert-light alert-dismissible fade show" role="alert">
                                <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="alert alert-dark alert-dismissible fade show" role="alert">
                                <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Additional Content</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-success" role="alert">
                                <h4 class="alert-heading">Well done!</h4>
                                <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                                <hr>
                                <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-badge">Badges</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Badges</h5>
                        </div>
                        <div class="card-body">
                            <h1>Example heading <span class="badge badge-secondary">New</span></h1>
                            <h2>Example heading <span class="badge badge-secondary">New</span></h2>
                            <h3>Example heading <span class="badge badge-secondary">New</span></h3>
                            <h4>Example heading <span class="badge badge-secondary">New</span></h4>
                            <h5>Example heading <span class="badge badge-secondary">New</span></h5>
                            <h6>Example heading <span class="badge badge-secondary">New</span></h6>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Button Badges</h5>
                        </div>
                        <div class="card-body">
                            <button type="button" class="btn btn-primary">primary <span class="badge badge-light">4</span></button>
                            <button type="button" class="btn btn-secondary">secondary <span class="badge badge-light">4</span></button>
                            <button type="button" class="btn btn-success">success <span class="badge badge-light">4</span></button>
                            <button type="button" class="btn btn-danger">danger <span class="badge badge-light">4</span></button>
                            <button type="button" class="btn btn-warning">warning <span class="badge badge-light">4</span></button>
                            <button type="button" class="btn btn-info">info <span class="badge badge-light">4</span></button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Contextual Variations</h5>
                        </div>
                        <div class="card-body">
                            <span class="badge badge-primary">Primary</span>
                            <span class="badge badge-secondary">Secondary</span>
                            <span class="badge badge-success">Success</span>
                            <span class="badge badge-danger">Danger</span>
                            <span class="badge badge-warning">Warning</span>
                            <span class="badge badge-info">Info</span>
                            <span class="badge badge-light">Light</span>
                            <span class="badge badge-dark">Dark</span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Pill Badges</h5>
                        </div>
                        <div class="card-body">
                            <span class="badge badge-pill badge-primary">Primary</span>
                            <span class="badge badge-pill badge-secondary">Secondary</span>
                            <span class="badge badge-pill badge-success">Success</span>
                            <span class="badge badge-pill badge-danger">Danger</span>
                            <span class="badge badge-pill badge-warning">Warning</span>
                            <span class="badge badge-pill badge-info">Info</span>
                            <span class="badge badge-pill badge-light">Light</span>
                            <span class="badge badge-pill badge-d1ark">Dark</span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Links</h5>
                        </div>
                        <div class="card-body">
                            <a href="#!" class="badge badge-primary">Primary</a>
                            <a href="#!" class="badge badge-secondary">Secondary</a>
                            <a href="#!" class="badge badge-success">Success</a>
                            <a href="#!" class="badge badge-danger">Danger</a>
                            <a href="#!" class="badge badge-warning">Warning</a>
                            <a href="#!" class="badge badge-info">Info</a>
                            <a href="#!" class="badge badge-light">Light</a>
                            <a href="#!" class="badge badge-dark">Dark</a>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-button">Button</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Default</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-primary" title="btn btn-primary" data-toggle="tooltip">Primary</button>
                            <button type="button" class="btn btn-secondary" title="btn btn-secondary" data-toggle="tooltip">Secondary</button>
                            <button type="button" class="btn btn-success" title="btn btn-success" data-toggle="tooltip">Success</button>
                            <button type="button" class="btn btn-danger" title="btn btn-danger" data-toggle="tooltip">Danger</button>
                            <button type="button" class="btn btn-warning" title="btn btn-warning" data-toggle="tooltip">Warning</button>
                            <button type="button" class="btn btn-info" title="btn btn-info" data-toggle="tooltip">Info</button>
                            <button type="button" class="btn btn-light" title="btn btn-light" data-toggle="tooltip">Light</button>
                            <button type="button" class="btn btn-dark" title="btn btn-dark" data-toggle="tooltip">Dark</button>
                            <button type="button" class="btn btn-link" title="btn btn-link" data-toggle="tooltip">Link</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Outline</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-outline-primary" title="btn btn-outline-primary" data-toggle="tooltip">Primary</button>
                            <button type="button" class="btn btn-outline-secondary" title="btn btn-outline-secondary" data-toggle="tooltip">Secondary</button>
                            <button type="button" class="btn btn-outline-success" title="btn btn-outline-success" data-toggle="tooltip">Success</button>
                            <button type="button" class="btn btn-outline-danger" title="btn btn-outline-danger" data-toggle="tooltip">Danger</button>
                            <button type="button" class="btn btn-outline-warning" title="btn btn-outline-warning" data-toggle="tooltip">Warning</button>
                            <button type="button" class="btn btn-outline-info" title="btn btn-outline-info" data-toggle="tooltip">Info</button>
                            <button type="button" class="btn btn-outline-light" title="btn btn-outline-light" data-toggle="tooltip">Light</button>
                            <button type="button" class="btn btn-outline-dark" title="btn btn-outline-dark" data-toggle="tooltip">Dark</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Square Button</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.btn-square</code> in class <code>.btn</code> class to get square button</p>
                            <button type="button" class="btn btn-square btn-primary">Primary</button>
                            <button type="button" class="btn btn-square btn-secondary">Secondary</button>
                            <button type="button" class="btn btn-square btn-success">Success</button>
                            <button type="button" class="btn btn-square btn-danger">Danger</button>
                            <button type="button" class="btn btn-square btn-warning">Warning</button>
                            <button type="button" class="btn btn-square btn-info">Info</button>
                            <button type="button" class="btn btn-square btn-light">Light</button>
                            <button type="button" class="btn btn-square btn-dark">Dark</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Disabled Button</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.disabled</code> in class <code>.btn</code> class to get Disabled button</p>
                            <button type="button" class="btn disabled btn-primary">Primary</button>
                            <button type="button" class="btn disabled btn-secondary">Secondary</button>
                            <button type="button" class="btn disabled btn-success">Success</button>
                            <button type="button" class="btn disabled btn-danger">Danger</button>
                            <button type="button" class="btn disabled btn-warning">Warning</button>
                            <button type="button" class="btn disabled btn-info">Info</button>
                            <button type="button" class="btn disabled btn-light">Light</button>
                            <button type="button" class="btn disabled btn-dark">Dark</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Rounded Button</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.btn-rounded</code> in class <code>.btn</code> class to get Rounded button</p>
                            <button type="button" class="btn btn-rounded btn-primary">Primary</button>
                            <button type="button" class="btn btn-rounded btn-secondary">Secondary</button>
                            <button type="button" class="btn btn-rounded btn-success">Success</button>
                            <button type="button" class="btn btn-rounded btn-danger">Danger</button>
                            <button type="button" class="btn btn-rounded btn-warning">Warning</button>
                            <button type="button" class="btn btn-rounded btn-info">Info</button>
                            <button type="button" class="btn btn-rounded btn-light">Light</button>
                            <button type="button" class="btn btn-rounded btn-dark">Dark</button>
                            <hr>
                            <p>use <code>.btn-rounded</code> in class <code>.btn-outline-8</code> class to get Rounded Outline button</p>
                            <button type="button" class="btn btn-rounded btn-outline-primary">Primary</button>
                            <button type="button" class="btn btn-rounded btn-outline-secondary">Secondary</button>
                            <button type="button" class="btn btn-rounded btn-outline-success">Success</button>
                            <button type="button" class="btn btn-rounded btn-outline-danger">Danger</button>
                            <button type="button" class="btn btn-rounded btn-outline-warning">Warning</button>
                            <button type="button" class="btn btn-rounded btn-outline-info">Info</button>
                            <button type="button" class="btn btn-rounded btn-outline-light">Light</button>
                            <button type="button" class="btn btn-rounded btn-outline-dark">Dark</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Glow Button</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.btn-glow</code> in class <code>.btn</code> class to get Glow button</p>
                            <button type="button" class="btn btn-glow-primary btn-primary" title="btn btn-glow-primary btn-primary" data-toggle="tooltip">Primary</button>
                            <button type="button" class="btn btn-glow-secondary btn-secondary" title="btn btn-glow-secondary btn-secondary" data-toggle="tooltip">Secondary</button>
                            <button type="button" class="btn btn-glow-success btn-success" title="btn btn-glow-success btn-success" data-toggle="tooltip">Success</button>
                            <button type="button" class="btn btn-glow-danger btn-danger" title="btn btn-glow-danger btn-danger" data-toggle="tooltip">Danger</button>
                            <button type="button" class="btn btn-glow-warning btn-warning" title="btn btn-glow-warning btn-warning" data-toggle="tooltip">Warning</button>
                            <button type="button" class="btn btn-glow-info btn-info" title="btn btn-glow-info btn-info" data-toggle="tooltip">Info</button>
                            <button type="button" class="btn btn-glow-light btn-light" title="btn btn-glow-light btn-light" data-toggle="tooltip">Light</button>
                            <button type="button" class="btn btn-glow-dark btn-dark" title="btn btn-glow-dark btn-dark" data-toggle="tooltip">Dark</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Shadow Button</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.shadow-{ 1 / 2 / 3 / 4 / 5 }</code> in class <code>.btn</code> class to get Shadow button</p>
                            <button type="button" class="btn shadow-1 btn-primary">.shadow-1</button>
                            <button type="button" class="btn shadow-2 btn-success">.shadow-2</button>
                            <button type="button" class="btn shadow-3 btn-danger">.shadow-3</button>
                            <button type="button" class="btn shadow-4 btn-warning">.shadow-4</button>
                            <button type="button" class="btn shadow-5 btn-info">.shadow-5</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Sizes [ Large ]</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.btn-lg</code> in class <code>.btn</code> class to get Large button</p>
                            <button type="button" class="btn btn-primary btn-lg">Large button</button>
                            <button type="button" class="btn btn-secondary btn-lg">Large button</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Sizes [ Small ]</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.btn-sm</code> in class <code>.btn</code> class to get Small button</p>
                            <button type="button" class="btn btn-primary btn-sm">Large button</button>
                            <button type="button" class="btn btn-secondary btn-sm">Large button</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Checkbox Button</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-secondary active">
                                    <input type="checkbox" checked> Checked</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Radio Buttons</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-secondary active">
                                    <input type="radio" name="options" id="option1" checked> Active</label>
                                <label class="btn btn-secondary">
                                    <input type="radio" name="options" id="option2"> Radio</label>
                                <label class="btn btn-secondary">
                                    <input type="radio" name="options" id="option3"> Radio</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Button With Icon</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-primary"><i class="feather icon-thumbs-up"></i>Primary</button>
                            <button type="button" class="btn btn-secondary"><i class="feather icon-camera"></i>Secondary</button>
                            <button type="button" class="btn btn-success"><i class="feather icon-check-circle"></i>Success</button>
                            <button type="button" class="btn btn-danger"><i class="feather icon-slash"></i>Danger</button>
                            <button type="button" class="btn btn-warning"><i class="feather icon-alert-triangle"></i>Warning</button>
                            <button type="button" class="btn btn-info"><i class="feather icon-info"></i>Info</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Outline Icon Buttons</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-outline-primary"><i class="feather icon-thumbs-up"></i>Primary</button>
                            <button type="button" class="btn btn-outline-secondary"><i class="feather icon-camera"></i>Secondary</button>
                            <button type="button" class="btn btn-outline-success"><i class="feather icon-check-circle"></i>Success</button>
                            <button type="button" class="btn btn-outline-danger"><i class="feather icon-slash"></i>Danger</button>
                            <button type="button" class="btn btn-outline-warning"><i class="feather icon-alert-triangle"></i>Warning</button>
                            <button type="button" class="btn btn-outline-info"><i class="feather icon-info"></i>Info</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Only Icon</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-icon btn-primary"><i class="feather icon-thumbs-up"></i></button>
                            <button type="button" class="btn btn-icon btn-secondary"><i class="feather icon-camera"></i></button>
                            <button type="button" class="btn btn-icon btn-success"><i class="feather icon-check-circle"></i></button>
                            <button type="button" class="btn btn-icon btn-danger"><i class="feather icon-slash"></i></button>
                            <button type="button" class="btn btn-icon btn-warning"><i class="feather icon-alert-triangle"></i></button>
                            <button type="button" class="btn btn-icon btn-info"><i class="feather icon-info"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Outline Icon</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-icon btn-outline-primary"><i class="feather icon-thumbs-up"></i></button>
                            <button type="button" class="btn btn-icon btn-outline-secondary"><i class="feather icon-camera"></i></button>
                            <button type="button" class="btn btn-icon btn-outline-success"><i class="feather icon-check-circle"></i></button>
                            <button type="button" class="btn btn-icon btn-outline-danger"><i class="feather icon-slash"></i></button>
                            <button type="button" class="btn btn-icon btn-outline-warning"><i class="feather icon-alert-triangle"></i></button>
                            <button type="button" class="btn btn-icon btn-outline-info"><i class="feather icon-info"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Icon Button Rounded</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-icon btn-rounded btn-primary"><i class="feather icon-thumbs-up"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-secondary"><i class="feather icon-camera"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-success"><i class="feather icon-check-circle"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-danger"><i class="feather icon-slash"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-warning"><i class="feather icon-alert-triangle"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-info"><i class="feather icon-info"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Icon Outline Button Rounded</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-icon btn-rounded btn-outline-primary"><i class="feather icon-thumbs-up"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-outline-secondary"><i class="feather icon-camera"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-outline-success"><i class="feather icon-check-circle"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-outline-danger"><i class="feather icon-slash"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-outline-warning"><i class="feather icon-alert-triangle"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-outline-info"><i class="feather icon-info"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Dropdown Button</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Split Dropdown Button</h5>
                        </div>
                        <div class="card-block">
                            <!-- Example split danger button -->
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-primary">Primary</button>
                                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-secondary">Secondary</button>
                                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-success">Success</button>
                                <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-danger">Danger</button>
                                <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-warning">Warning</button>
                                <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-info">Info</button>
                                <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Outline Dropdown Button</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-outline-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-outline-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-outline-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-outline-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Split Outline Dropdown Button</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-outline-primary">Primary</button>
                                <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-outline-secondary">Secondary</button>
                                <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-outline-success">Success</button>
                                <button type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-outline-danger">Danger</button>
                                <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-outline-warning">Warning</button>
                                <button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-outline-info">Info</button>
                                <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Icon Dropdown</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-thumbs-up"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-camera"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-check-circle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-slash"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-alert-triangle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-info"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Outline Icon Dropdown</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-thumbs-up"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-camera"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-outline-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-check-circle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-outline-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-slash"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-outline-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-alert-triangle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-outline-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-info"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Rounded Icon Dropdown</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-thumbs-up"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-camera"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-check-circle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-slash"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-alert-triangle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-info"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Outline Rounded Icon Dropdown</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-thumbs-up"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-camera"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-outline-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-check-circle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-outline-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-slash"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-outline-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-alert-triangle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-outline-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-info"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Button Group</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-secondary">Left</button>
                                <button type="button" class="btn btn-secondary">Middle</button>
                                <button type="button" class="btn btn-secondary">Right</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Button Toolbar</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                                <div class="btn-group mr-2" role="group" aria-label="First group">
                                    <button type="button" class="btn btn-secondary">1</button>
                                    <button type="button" class="btn btn-secondary">2</button>
                                    <button type="button" class="btn btn-secondary">3</button>
                                    <button type="button" class="btn btn-secondary">4</button>
                                </div>
                                <div class="btn-group mr-2" role="group" aria-label="Second group">
                                    <button type="button" class="btn btn-secondary">5</button>
                                    <button type="button" class="btn btn-secondary">6</button>
                                    <button type="button" class="btn btn-secondary">7</button>
                                </div>
                                <div class="btn-group" role="group" aria-label="Third group">
                                    <button type="button" class="btn btn-secondary">8</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Button Toolbar Size</h5>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-xl-4 col-md-12 mb-2">
                                    <p>use <code>.btn-group-lg</code> in class <code>.btn-group</code> class to get Large size button group</p>
                                    <div class="btn-group btn-group-lg" role="group" aria-label="button groups xl">
                                        <button type="button" class="btn btn-secondary">Left</button>
                                        <button type="button" class="btn btn-secondary">Middle</button>
                                        <button type="button" class="btn btn-secondary">Right</button>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-md-6 mb-2">
                                    <p>this is default size</p>
                                    <div class="btn-group" role="group" aria-label="button groups">
                                        <button type="button" class="btn btn-secondary">Left</button>
                                        <button type="button" class="btn btn-secondary">Middle</button>
                                        <button type="button" class="btn btn-secondary">Right</button>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-md-6 mb-2">
                                    <p>use <code>.btn-group-sm</code> in class <code>.btn-group</code> class to get Small size button group</p>
                                    <div class="btn-group btn-group-sm" role="group" aria-label="button groups sm">
                                        <button type="button" class="btn btn-secondary">Left</button>
                                        <button type="button" class="btn btn-secondary">Middle</button>
                                        <button type="button" class="btn btn-secondary">Right</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Nesting</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                <button type="button" class="btn btn-secondary">1</button>
                                <button type="button" class="btn btn-secondary">2</button>

                                <div class="btn-group" role="group">
                                    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Dropdown
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                        <a class="dropdown-item" href="#!">Dropdown link</a>
                                        <a class="dropdown-item" href="#!">Dropdown link</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Vertical Variation</h5>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-4">
                                    <div class="btn-group btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
                                        <button type="button" class="btn btn-secondary">1</button>
                                        <button type="button" class="btn btn-secondary">2</button>
                                        <button type="button" class="btn btn-secondary">3</button>
                                    </div>
                                </div>
                                <div class="col-8">
                                    <div class="btn-group btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
                                        <button type="button" class="btn btn-secondary">1</button>
                                        <button type="button" class="btn btn-secondary">2</button>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
                                                <a class="dropdown-item" href="#!">Dropdown link</a>
                                                <a class="dropdown-item" href="#!">Dropdown link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-breadcrumb">Breadcrumbs & Pagination</h2>
            <div class="row">
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Breadcrumb</h5>
                        </div>
                        <div class="card-body">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active" aria-current="page">Home</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#!">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Library</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#!">Home</a></li>
                                    <li class="breadcrumb-item"><a href="#!">Library</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Data</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Breadcrumb Icon</h5>
                        </div>
                        <div class="card-body">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active" aria-current="page"><i class="feather icon-home"></i></li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#!"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Library</li>
                                </ol>
                            </nav>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#!"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#!">Library</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Data</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Pagination</h5>
                        </div>
                        <div class="card-body">
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item"><a class="page-link" href="#!">Previous</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">3</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">Next</a></li>
                                </ul>
                            </nav>
                            <h5 class="mt-5">Working With Icons</h5>
                            <hr>
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item"><a class="page-link" href="#!" aria-label="Previous"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
                                    <li class="page-item"><a class="page-link" href="#!">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">3</a></li>
                                    <li class="page-item"><a class="page-link" href="#!" aria-label="Next"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
                                </ul>
                            </nav>
                            <h5 class="mt-5">Disabled and Active States</h5>
                            <hr>
                            <nav aria-label="...">
                                <ul class="pagination">
                                    <li class="page-item disabled"><span class="page-link">Previous</span></li>
                                    <li class="page-item"><a class="page-link" href="#!">1</a></li>
                                    <li class="page-item active"><span class="page-link">2<span class="sr-only">(current)</span></span>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="#!">3</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">Next</a></li>
                                </ul>
                            </nav>
                            <h5 class="mt-5">Sizing</h5>
                            <hr>
                            <nav class="mb-4" aria-label="...">
                                <ul class="pagination pagination-lg">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#!" tabindex="-1">1</a>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="#!">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">3</a></li>
                                </ul>
                            </nav>
                            <nav aria-label="...">
                                <ul class="pagination pagination-sm">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#!" tabindex="-1">1</a>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="#!">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">3</a></li>
                                </ul>
                            </nav>
                            <h5 class="mt-5">Alignment</h5>
                            <hr>
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-center">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#!" tabindex="-1">Previous</a>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="#!">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">3</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#!">Next</a>
                                    </li>
                                </ul>
                            </nav>
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-end">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#!" tabindex="-1">Previous</a>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="#!">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">3</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#!">Next</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-modal">Modal</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <h5>Demo Modal</h5>
                    <hr>
                    <div class="card">
                        <div class="card-body">
                            <div class="bd-example-modal mb-4">
                                <div class="modal" tabindex="-1" role="dialog">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Modal Title</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            </div>
                                            <div class="modal-body">
                                                <p>Modal body text goes here.</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                <button type="button" class="btn btn-primary mr-0">Save changes</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLiveLabel">Modal Title</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>Woohoo, you're reading this text in a modal!</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLive">Launch demo modal</button>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <h5>Scrolling Long Content</h5>
                    <hr>
                    <div class="card">
                        <div class="card-body">
                            <div id="exampleModalLong" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLongTitle">Modal Title</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">Launch demo modal</button>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <h5>Vertically Centered</h5>
                    <hr>
                    <div class="card">
                        <div class="card-body">
                            <div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalCenterTitle">Modal Title</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">Launch demo modal</button>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Tooltips Modal</h5>
                        </div>
                        <div class="card-body">
                            <div id="exampleModalPopovers" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalPopoversLabel">Modal Title</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        </div>
                                        <div class="modal-body">
                                            <h5>Tooltips in a Button</h5>
                                            <p>This <a href="#!" role="button" class="btn btn-secondary tooltip-test" data-toggle="tooltip" title="Button Tooltip" data-container="#exampleModalPopovers">button</a>
                                                triggers a popover on click.</p>
                                            <hr />
                                            <h5>Tooltips in a modal</h5>
                                            <p><a href="#!" class="tooltip-test" data-toggle="tooltip" title="Tooltip" data-container="#exampleModalPopovers">This link</a> and <a href="#!" class="tooltip-test" data-toggle="tooltip" title="Tooltip"
                                                    data-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalPopovers">Launch demo modal</button>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <h5>Using the Grid</h5>
                    <hr>
                    <div class="card">
                        <div class="card-body">
                            <div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="gridModalLabel">Grids in Modals</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="container-fluid bd-example-row">
                                                <div class="row">
                                                    <div class="col-md-4">.col-md-4</div>
                                                    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
                                                    <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-9">
                                                        Level 1: .col-sm-9
                                                        <div class="row">
                                                            <div class="col-8 col-sm-6">
                                                                Level 2: .col-8 .col-sm-6
                                                            </div>
                                                            <div class="col-4 col-sm-6">
                                                                Level 2: .col-4 .col-sm-6
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#gridSystemModal">Launch demo modal</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 col-sm-12 datta-example">
                    <h5>Optional Sizes</h5>
                    <hr>
                    <div class="card">
                        <div class="card-body">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
                            <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title h4" id="myLargeModalLabel">Large Modal</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        </div>
                                        <div class="modal-body">
                                            ...
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-sm">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title h4" id="mySmallModalLabel">Small Modal</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        </div>
                                        <div class="modal-body">
                                            ...
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <h5>Varying Modal Content</h5>
                    <hr>
                    <div class="card">
                        <div class="card-body">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @bootstrap</button>
                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">New Message</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        </div>
                                        <div class="modal-body">
                                            <form>
                                                <div class="form-group">
                                                    <label for="recipient-name" class="col-form-label">Recipient:</label>
                                                    <input type="text" class="form-control" id="recipient-name">
                                                </div>
                                                <div class="form-group">
                                                    <label for="message-text" class="col-form-label">Message:</label>
                                                    <textarea class="form-control" id="message-text"></textarea>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Send message</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script>
                        $('#exampleModal').on('show.bs.modal', function(event) {
                            var button = $(event.relatedTarget) // Button that triggered the modal
                            var recipient = button.data('whatever') // Extract info from data-* attributes
                            var modal = $(this)
                            modal.find('.modal-title').text('New message to ' + recipient)
                            modal.find('.modal-body input').val(recipient)
                        })
                    </script>
                </div>
            </div>
            <h2 class="docs-header" id="page-card">Card</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="row">
                        <div class="col-md-6 col-xl-4">
                            <h5>Body Content</h5>
                            <hr>
                            <div class="card">
                                <div class="card-body">
                                    This is some text within a card body.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-4">
                            <h5>Titles, Text, and Links</h5>
                            <hr>
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                    <a href="#!" class="card-link">Card link</a>
                                    <a href="#!" class="card-link">Another link</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-4">
                            <h5>Header and Footer</h5>
                            <hr>
                            <div class="card">
                                <h5 class="card-header">Featured</h5>
                                <div class="card-body">
                                    <h5 class="card-title">Special title treatment</h5>
                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="#!" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 datta-example">
                    <div class="row">
                        <div class="col-sm-4">
                            <h5>Left Align</h5>
                            <hr>
                            <div class="card text-left">
                                <div class="card-body">
                                    <h5 class="card-title">Special title treatment</h5>
                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="#!" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <h5>Center Align</h5>
                            <hr>
                            <div class="card text-center">
                                <div class="card-body">
                                    <h5 class="card-title">Special title treatment</h5>
                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="#!" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <h5>Right Align</h5>
                            <hr>
                            <div class="card text-right">
                                <div class="card-body">
                                    <h5 class="card-title">Special title treatment</h5>
                                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                    <a href="#!" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="row">
                        <div class="col-md-6 col-xl-4">
                            <h5>Image Caps</h5>
                            <hr>
                            <div class="card mb-3">
                                <img class="card-img-top" src="assets/images/slider/img-slide-3.jpg" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-4">
                            <h5>Image Caps[ Bottom ]</h5>
                            <hr>
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                </div>
                                <img class="card-img-bottom" src="assets/images/slider/img-slide-3.jpg" alt="Card image cap">
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-4">
                            <h5>Image Overlays</h5>
                            <hr>
                            <div class="card bg-dark">
                                <img class="card-img" src="assets/images/slider/img-slide-7.jpg" alt="Card image">
                                <div class="card-img-overlay">
                                    <h5 class="card-title text-white">Card title</h5>
                                    <p class="card-text text-white">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    <p class="card-text text-white">Last updated 3 mins ago</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <h5 class="mt-4">Card Styles</h5>
                    <hr>
                    <div class="datta-example">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="card text-white bg-primary">
                                    <div class="card-header">Header</div>
                                    <div class="card-body">
                                        <h5 class="card-title text-white">Primary card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="card text-white bg-secondary">
                                    <div class="card-header">Header</div>
                                    <div class="card-body">
                                        <h5 class="card-title text-white">Secondary card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="card text-white bg-success">
                                    <div class="card-header">Header</div>
                                    <div class="card-body">
                                        <h5 class="card-title text-white">Success card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="card text-white bg-danger">
                                    <div class="card-header">Header</div>
                                    <div class="card-body">
                                        <h5 class="card-title text-white">Danger card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="card text-white bg-warning">
                                    <div class="card-header">Header</div>
                                    <div class="card-body">
                                        <h5 class="card-title text-white">Warning card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="card text-white bg-info ">
                                    <div class="card-header">Header</div>
                                    <div class="card-body">
                                        <h5 class="card-title text-white">Info card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="card bg-light ">
                                    <div class="card-header">Header</div>
                                    <div class="card-body">
                                        <h5 class="card-title">Light card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="card text-white bg-dark ">
                                    <div class="card-header">Header</div>
                                    <div class="card-body">
                                        <h5 class="card-title text-white">Dark card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <h5>Card Groups</h5>
                    <hr>
                    <div class="datta-example">
                        <div class="card-group">
                            <div class="card">
                                <img class="card-img-top" src="assets/images/slider/img-slide-4.jpg" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                </div>
                                <div class="card-footer">
                                    <small class="text-muted">Last updated 3 mins ago</small>
                                </div>
                            </div>
                            <div class="card">
                                <img class="card-img-top" src="assets/images/slider/img-slide-2.jpg" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                                </div>
                                <div class="card-footer">
                                    <small class="text-muted">Last updated 3 mins ago</small>
                                </div>
                            </div>
                            <div class="card">
                                <img class="card-img-top" src="assets/images/slider/img-slide-1.jpg" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                                </div>
                                <div class="card-footer">
                                    <small class="text-muted">Last updated 3 mins ago</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <h5 class="mt-4">Card Decks</h5>
                    <hr>
                    <div class="datta-example">
                        <div class="card-deck">
                            <div class="card">
                                <img class="card-img-top" src="assets/images/slider/img-slide-4.jpg" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                </div>
                                <div class="card-footer">
                                    <small class="text-muted">Last updated 3 mins ago</small>
                                </div>
                            </div>
                            <div class="card">
                                <img class="card-img-top" src="assets/images/slider/img-slide-2.jpg" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                                </div>
                                <div class="card-footer">
                                    <small class="text-muted">Last updated 3 mins ago</small>
                                </div>
                            </div>
                            <div class="card">
                                <img class="card-img-top" src="assets/images/slider/img-slide-1.jpg" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                                </div>
                                <div class="card-footer">
                                    <small class="text-muted">Last updated 3 mins ago</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <h5 class="mt-4">Card Columns</h5>
                    <hr>
                    <div class="datta-example">
                        <div class="card-columns">
                            <div class="card">
                                <img class="card-img-top" src="assets/images/slider/img-slide-1.jpg" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title that wraps to a new line</h5>
                                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    <button class="btn btn-primary">View More</button>
                                    <button class="btn btn-danger">Delete</button>
                                </div>
                            </div>
                            <div class="card">
                                <blockquote class="blockquote mb-0 card-body">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                    <footer class="blockquote-footer">
                                        <small class="text-muted">Someone famous in <cite title="Source Title">Source Title</cite></small>
                                    </footer>
                                </blockquote>
                            </div>
                            <div class="card">
                                <img class="card-img-top" src="assets/images/slider/img-slide-3.jpg" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                </div>
                            </div>
                            <div class="card theme-bg text-white text-center">
                                <div class="card-body">
                                    <blockquote class="blockquote mb-0">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                                        <footer class="blockquote-footer text-white">
                                            <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
                                        </footer>
                                    </blockquote>
                                </div>
                            </div>
                            <div class="card text-center">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                </div>
                            </div>
                            <div class="card">
                                <img class="card-img" src="assets/images/slider/img-slide-2.jpg" alt="Card image">
                            </div>
                            <div class="card text-right">
                                <div class="card-body">
                                    <blockquote class="blockquote mb-0">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                        <footer class="blockquote-footer">
                                            <small class="text-muted">Someone famous in <cite title="Source Title">Source Title</cite></small>
                                        </footer>
                                    </blockquote>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-collapse">Collapse</h2>
            <div class="row">
                <div class="col-sm-12">
                    <h5 class="mb-3">Basic Collapse</h5>
                    <hr>
                    <div class="datta-example">
                        <div class="card">
                            <div class="card-header">
                                <a class="btn btn-primary m-t-5" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Link with href</a>
                                <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button>
                            </div>
                            <div class="collapse" id="collapseExample">
                                <div class="card-body">
                                    <p class="mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 mb-3 datta-example">
                    <h5 class="mb-3">Multiple Targets</h5>
                    <hr>
                    <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
                    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
                    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
                    <div class="row">
                        <div class="col">
                            <div class="collapse multi-collapse mt-2" id="multiCollapseExample1">
                                <div class="card">
                                    <div class="card-body">
                                        <p class="mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
                                            proident.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="collapse multi-collapse mt-2" id="multiCollapseExample2">
                                <div class="card">
                                    <div class="card-body">
                                        <p class="mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
                                            proident.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <h5 class="mb-3">Accordion Example</h5>
                    <hr>
                    <div class="accordion" id="accordionExample">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <h5 class="mb-0"><a href="#!" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</a></h5>
                            </div>
                            <div id="collapseOne" class=" card-body collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                                eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                                sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore
                                sustainable VHS.
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo">
                                <h5 class="mb-0"><a href="#!" class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</a></h5>
                            </div>
                            <div id="collapseTwo" class="collapse card-body" aria-labelledby="headingTwo" data-parent="#accordionExample">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                                eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                                sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore
                                sustainable VHS.
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree">
                                <h5 class="mb-0"><a href="#!" class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #3</a></h5>
                            </div>
                            <div id="collapseThree" class="card-body collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                                eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                                sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore
                                sustainable VHS.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-carousel">Carousel</h2>
            <div class="row">
                <div class="col-sm-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Carousel</h5>
                        </div>
                        <div class="card-body">
                            <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-1.jpg" alt="First slide">
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-2.jpg" alt="Second slide">
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-3.jpg" alt="Third slide">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Carousel Controls</h5>
                        </div>
                        <div class="card-body">
                            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-4.jpg" alt="First slide">
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-3.jpg" alt="Second slide">
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
                                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Carousel Indicators</h5>
                        </div>
                        <div class="card-body">
                            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                                </ol>
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-5.jpg" alt="First slide">
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-7.jpg" alt="Second slide">
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-2.jpg" alt="Third slide">
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
                                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Carousel Crossfade</h5>
                        </div>
                        <div class="card-body">
                            <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-7.jpg" alt="First slide">
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-3.jpg" alt="Second slide">
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
                                <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Carousel With Captions</h5>
                        </div>
                        <div class="card-body">
                            <div id="carouselExampleIndicatorscaption" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                                </ol>
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-2.jpg" alt="First slide">
                                        <div class="carousel-caption d-none d-md-block">
                                            <h5 class="text-white">First slide label</h5>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-1.jpg" alt="Second slide">
                                        <div class="carousel-caption d-none d-md-block">
                                            <h5 class="text-white">Second slide label</h5>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="assets/images/slider/img-slide-3.jpg" alt="Third slide">
                                        <div class="carousel-caption d-none d-md-block">
                                            <h5 class="text-white">Third slide label</h5>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                                        </div>
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleIndicatorscaption" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
                                <a class="carousel-control-next" href="#carouselExampleIndicatorscaption" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-grid">Grid</h2>
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>Grid System</h5>
                        </div>
                        <div class="card-body">
                            <p>Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.</p>
                            <h5 class="mt-5">How it works</h5>
                            <hr>
                            <p>Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a>
                                and is fully responsive. Below is an example and an in-depth look at how the grid comes together.</p>
                            <p><strong>New to or unfamiliar with flexbox?</strong> <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background">Read this CSS Tricks flexbox guide</a> for background, terminology, guidelines,
                                and code snippets.</p>
                            <div class="bd-example-row">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-sm">
                                            One of three columns
                                        </div>
                                        <div class="col-sm">
                                            One of three columns
                                        </div>
                                        <div class="col-sm">
                                            One of three columns
                                        </div>
                                    </div>
                                </div>

                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="container"&gt;
                                            &lt;div class="row"&gt;
                                                &lt;div class="col-sm"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                                &lt;div class="col-sm"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                                &lt;div class="col-sm"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>
                            <p>The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent <code class="highlighter-rouge">.container</code>.</p>
                            <p>Breaking it down, here’s how it works:</p>
                            <ul>
                                <li>Containers provide a means to center and horizontally pad your site’s contents. Use <code class="highlighter-rouge">.container</code> for a responsive pixel width or <code class="highlighter-rouge">.container-fluid</code>
                                    for
                                    <code class="highlighter-rouge">width: 100%</code> across all viewport and device sizes.</li>
                                <li>Rows are wrappers for columns. Each column has horizontal <code class="highlighter-rouge">padding</code> (called a gutter) for controlling the space between them. This <code class="highlighter-rouge">padding</code>
                                    is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.</li>
                                <li>In a grid layout, content must be placed within columns and only columns may be immediate children of rows.</li>
                                <li>Thanks to flexbox, grid columns without a specified <code class="highlighter-rouge">width</code> will automatically layout as equal width columns. For example, four instances of <code class="highlighter-rouge">.col-sm</code>
                                    will each automatically be 25% wide from the small breakpoint and up. See the <a href="#auto-layout-columns">auto-layout columns</a> section for more examples.</li>
                                <li>Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use <code class="highlighter-rouge">.col-4</code>.</li>
                                <li>Column <code class="highlighter-rouge">width</code>s are set in percentages, so they’re always fluid and sized relative to their parent element.</li>
                                <li>Columns have horizontal <code class="highlighter-rouge">padding</code> to create the gutters between individual columns, however, you can remove the <code class="highlighter-rouge">margin</code> from rows and
                                    <code class="highlighter-rouge">padding</code> from columns with <code class="highlighter-rouge">.no-gutters</code> on the <code class="highlighter-rouge">.row</code>.</li>
                                <li>To make the grid responsive, there are five grid breakpoints, one for each <a href="../../../../../docs/4.1/layout/overview/index.html">responsive breakpoint</a>: all breakpoints (extra small), small, medium,
                                    large, and extra large.</li>
                                <li>Grid breakpoints are based on minimum width media queries, meaning <strong>they apply to that one breakpoint and all those above it</strong> (e.g., <code class="highlighter-rouge">.col-sm-4</code> applies to
                                    small, medium, large, and extra large devices, but not the first <code class="highlighter-rouge">xs</code> breakpoint).</li>
                                <li>You can use predefined grid classes (like <code class="highlighter-rouge">.col-4</code>) or <a href="#sass-mixins">Sass mixins</a> for more semantic markup.</li>
                            </ul>
                            <p>Be aware of the limitations and <a href="https://github.com/philipwalton/flexbugs">bugs around flexbox</a>, like the <a href="https://github.com/philipwalton/flexbugs#flexbug-9">inability to use some HTML elements as
                                    flex containers</a>.</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>Grid Options</h5>
                        </div>
                        <div class="card-body">
                            <p>While Bootstrap uses <code class="highlighter-rouge">em</code>s or <code class="highlighter-rouge">rem</code>s for defining most sizes, <code class="highlighter-rouge">px</code>s are used for grid breakpoints and
                                container widths. This is because the viewport width is in pixels and does not change with the <a href="https://drafts.csswg.org/mediaqueries-3/#units">font size</a>.</p>
                            <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th class="text-center">
                                                Extra small
                                                <br />
                                                <small>&lt;576px</small>
                                            </th>
                                            <th class="text-center">
                                                Small
                                                <br />
                                                <small>&ge;576px</small>
                                            </th>
                                            <th class="text-center">
                                                Medium
                                                <br />
                                                <small>&ge;768px</small>
                                            </th>
                                            <th class="text-center">
                                                Large
                                                <br />
                                                <small>&ge;992px</small>
                                            </th>
                                            <th class="text-center">
                                                Extra large
                                                <br />
                                                <small>&ge;1200px</small>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th class="text-nowrap" scope="row">Max container width</th>
                                            <td>None (auto)</td>
                                            <td>540px</td>
                                            <td>720px</td>
                                            <td>960px</td>
                                            <td>1140px</td>
                                        </tr>
                                        <tr>
                                            <th class="text-nowrap" scope="row">Class prefix</th>
                                            <td><code>.col-</code></td>
                                            <td><code>.col-sm-</code></td>
                                            <td><code>.col-md-</code></td>
                                            <td><code>.col-lg-</code></td>
                                            <td><code>.col-xl-</code></td>
                                        </tr>
                                        <tr>
                                            <th class="text-nowrap" scope="row"># of columns</th>
                                            <td colspan="5">12</td>
                                        </tr>
                                        <tr>
                                            <th class="text-nowrap" scope="row">Gutter width</th>
                                            <td colspan="5">30px (15px on each side of a column)</td>
                                        </tr>
                                        <tr>
                                            <th class="text-nowrap" scope="row">Nestable</th>
                                            <td colspan="5">Yes</td>
                                        </tr>
                                        <tr>
                                            <th class="text-nowrap" scope="row">Column ordering</th>
                                            <td colspan="5">Yes</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>Auto-layout Columns</h5>
                        </div>
                        <div class="card-body">
                            <p>Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like <code class="highlighter-rouge">.col-sm-6</code>.</p>
                            <h5 class="mt-5">Equal-width</h5>
                            <hr>
                            <p>For example, here are two grid layouts that apply to every device and viewport, from <code class="highlighter-rouge">xs</code> to <code class="highlighter-rouge">xl</code>. Add any number of unit-less classes for each
                                breakpoint you need and every column will be the same width.</p>
                            <div class="bd-example-row">
                                <div class="container">
                                    <div class="row">
                                        <div class="col">
                                            1 of 2
                                        </div>
                                        <div class="col">
                                            2 of 2
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            1 of 3
                                        </div>
                                        <div class="col">
                                            2 of 3
                                        </div>
                                        <div class="col">
                                            3 of 3
                                        </div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="container"&gt;
                                            &lt;div class="row"&gt;
                                                &lt;div class="col"&gt;
                                                    1 of 2
                                                &lt;/div&gt;
                                                &lt;div class="col"&gt;
                                                    2 of 2
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class="row"&gt;
                                                &lt;div class="col"&gt;
                                                    1 of 3
                                                &lt;/div&gt;
                                                &lt;div class="col"&gt;
                                                    2 of 3
                                                &lt;/div&gt;
                                                &lt;div class="col"&gt;
                                                    3 of 3
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>
                            <p>Equal-width columns can be broken into multiple lines, but there was a <a href="https://github.com/philipwalton/flexbugs#flexbug-11">Safari flexbox bug</a> that prevented this from working without an explicit
                                <code class="highlighter-rouge">flex-basis</code> or <code class="highlighter-rouge">border</code>. There are workarounds for older browser versions, but they shouldn’t be necessary if you’re up-to-date.</p>
                            <div class="bd-example-row">
                                <div class="container">
                                    <div class="row">
                                        <div class="col">Column</div>
                                        <div class="col">Column</div>
                                        <div class="w-100"></div>
                                        <div class="col">Column</div>
                                        <div class="col">Column</div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="container"&gt;
                                            &lt;div class="row"&gt;
                                                &lt;div class="col"&gt;Column&lt;/div&gt;
                                                &lt;div class="col"&gt;Column&lt;/div&gt;
                                                &lt;div class="w-100"&gt;&lt;/div&gt;
                                                &lt;div class="col"&gt;Column&lt;/div&gt;
                                                &lt;div class="col"&gt;Column&lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>

                            <h5 class="mt-5">Setting one column width</h5>
                            <hr>
                            <p>Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or
                                inline widths. Note that the other columns will resize no matter the width of the center column.</p>

                            <div class="bd-example-row">
                                <div class="container">
                                    <div class="row">
                                        <div class="col">
                                            1 of 3
                                        </div>
                                        <div class="col-6">
                                            2 of 3 (wider)
                                        </div>
                                        <div class="col">
                                            3 of 3
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            1 of 3
                                        </div>
                                        <div class="col-5">
                                            2 of 3 (wider)
                                        </div>
                                        <div class="col">
                                            3 of 3
                                        </div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="container"&gt;
                                            &lt;div class="row"&gt;
                                                &lt;div class="col"&gt;
                                                    1 of 3
                                                &lt;/div&gt;
                                                &lt;div class="col-6"&gt;
                                                    2 of 3 (wider)
                                                &lt;/div&gt;
                                                &lt;div class="col"&gt;
                                                    3 of 3
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class="row"&gt;
                                                &lt;div class="col"&gt;
                                                    1 of 3
                                                &lt;/div&gt;
                                                &lt;div class="col-5"&gt;
                                                    2 of 3 (wider)
                                                &lt;/div&gt;
                                                &lt;div class="col"&gt;
                                                    3 of 3
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;

                                    </code>
                                </pre>
                            </div>

                            <h5 class="mt-5">Variable width content</h5>
                            <hr>
                            <p>Use <code class="highlighter-rouge">col-{breakpoint}-auto</code> classes to size columns based on the natural width of their content.</p>
                            <div class="bd-example-row">
                                <div class="container">
                                    <div class="row justify-content-md-center">
                                        <div class="col col-lg-2">
                                            1 of 3
                                        </div>
                                        <div class="col-md-auto">
                                            Variable width content
                                        </div>
                                        <div class="col col-lg-2">
                                            3 of 3
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            1 of 3
                                        </div>
                                        <div class="col-md-auto">
                                            Variable width content
                                        </div>
                                        <div class="col col-lg-2">
                                            3 of 3
                                        </div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="container"&gt;
                                            &lt;div class="row justify-content-md-center"&gt;
                                                &lt;div class="col col-lg-2"&gt;
                                                    1 of 3
                                                &lt;/div&gt;
                                                &lt;div class="col-md-auto"&gt;
                                                    Variable width content
                                                &lt;/div&gt;
                                                &lt;div class="col col-lg-2"&gt;
                                                    3 of 3
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class="row"&gt;
                                                &lt;div class="col"&gt;
                                                    1 of 3
                                                &lt;/div&gt;
                                                &lt;div class="col-md-auto"&gt;
                                                    Variable width content
                                                &lt;/div&gt;
                                                &lt;div class="col col-lg-2"&gt;
                                                    3 of 3
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>

                            <h5 class="mt-5">Equal-width multi-row</h5>
                            <hr>
                            <p>Create equal-width columns that span multiple rows by inserting a <code class="highlighter-rouge">.w-100</code> where you want the columns to break to a new line. Make the breaks responsive by mixing the
                                <code class="highlighter-rouge">.w-100</code> with some <a href="../../../../../docs/4.1/utilities/display/index.html">responsive display utilities</a>.</p>
                            <div class="bd-example-row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col">col</div>
                                        <div class="col">col</div>
                                        <div class="w-100"></div>
                                        <div class="col">col</div>
                                        <div class="col">col</div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="row"&gt;
                                            &lt;div class="col"&gt;col&lt;/div&gt;
                                            &lt;div class="col"&gt;col&lt;/div&gt;
                                            &lt;div class="w-100"&gt;&lt;/div&gt;
                                            &lt;div class="col"&gt;col&lt;/div&gt;
                                            &lt;div class="col"&gt;col&lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>Responsive Classes</h5>
                        </div>
                        <div class="card-body">
                            <p>Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.</p>
                            <h5 class="mt-5">All breakpoints</h5>
                            <hr>
                            <p>For grids that are the same from the smallest of devices to the largest, use the <code class="highlighter-rouge">.col</code> and <code class="highlighter-rouge">.col-*</code> classes. Specify a numbered class when you
                                need a particularly sized column; otherwise, feel free to stick to <code class="highlighter-rouge">.col</code>.</p>
                            <div class="bd-example-row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col">col</div>
                                        <div class="col">col</div>
                                        <div class="col">col</div>
                                        <div class="col">col</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-8">col-8</div>
                                        <div class="col-4">col-4</div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="row"&gt;
                                            &lt;div class="col"&gt;col&lt;/div&gt;
                                            &lt;div class="col"&gt;col&lt;/div&gt;
                                            &lt;div class="col"&gt;col&lt;/div&gt;
                                            &lt;div class="col"&gt;col&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-8"&gt;col-8&lt;/div&gt;
                                            &lt;div class="col-4"&gt;col-4&lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>
                            <h5 class="mt-5">Stacked to horizontal</h5>
                            <hr>
                            <p>Using a single set of <code class="highlighter-rouge">.col-sm-*</code> classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (<code class="highlighter-rouge">sm</code>).</p>
                            <div class="bd-example-row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm-8">col-sm-8</div>
                                        <div class="col-sm-4">col-sm-4</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm">col-sm</div>
                                        <div class="col-sm">col-sm</div>
                                        <div class="col-sm">col-sm</div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-sm-8"&gt;col-sm-8&lt;/div&gt;
                                            &lt;div class="col-sm-4"&gt;col-sm-4&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-sm"&gt;col-sm&lt;/div&gt;
                                            &lt;div class="col-sm"&gt;col-sm&lt;/div&gt;
                                            &lt;div class="col-sm"&gt;col-sm&lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>

                            <h5 class="mt-5">Mix and match</h5>
                            <hr>
                            <p>Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.</p>
                            <div class="bd-example-row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-12 col-md-8">.col-12 .col-md-8</div>
                                        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">.col-6</div>
                                        <div class="col-6">.col-6</div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;!-- Stack the columns on mobile by making one full-width and the other half-width --&gt;
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-12 col-md-8"&gt;.col-12 .col-md-8&lt;/div&gt;
                                            &lt;div class="col-6 col-md-4"&gt;.col-6 .col-md-4&lt;/div&gt;
                                        &lt;/div&gt;

                                        &lt;!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --&gt;
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-6 col-md-4"&gt;.col-6 .col-md-4&lt;/div&gt;
                                            &lt;div class="col-6 col-md-4"&gt;.col-6 .col-md-4&lt;/div&gt;
                                            &lt;div class="col-6 col-md-4"&gt;.col-6 .col-md-4&lt;/div&gt;
                                        &lt;/div&gt;

                                        &lt;!-- Columns are always 50% wide, on mobile and desktop --&gt;
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-6"&gt;.col-6&lt;/div&gt;
                                            &lt;div class="col-6"&gt;.col-6&lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>Alignment</h5>
                        </div>
                        <div class="card-body">
                            <p>Use flexbox alignment utilities to vertically and horizontally align columns.</p>

                            <h5 class="mt-5">Vertical alignment</h5>
                            <hr>
                            <div class="bd-example-row bd-example-row-flex-cols">
                                <div class="container">
                                    <div class="row align-items-start">
                                        <div class="col">
                                            One of three columns
                                        </div>
                                        <div class="col">
                                            One of three columns
                                        </div>
                                        <div class="col">
                                            One of three columns
                                        </div>
                                    </div>
                                    <div class="row align-items-center">
                                        <div class="col">
                                            One of three columns
                                        </div>
                                        <div class="col">
                                            One of three columns
                                        </div>
                                        <div class="col">
                                            One of three columns
                                        </div>
                                    </div>
                                    <div class="row align-items-end">
                                        <div class="col">
                                            One of three columns
                                        </div>
                                        <div class="col">
                                            One of three columns
                                        </div>
                                        <div class="col">
                                            One of three columns
                                        </div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="container"&gt;
                                            &lt;div class="row align-items-start"&gt;
                                                &lt;div class="col"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                                &lt;div class="col"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                                &lt;div class="col"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class="row align-items-center"&gt;
                                                &lt;div class="col"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                                &lt;div class="col"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                                &lt;div class="col"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class="row align-items-end"&gt;
                                                &lt;div class="col"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                                &lt;div class="col"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                                &lt;div class="col"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>
                            <div class="bd-example-row bd-example-row-flex-cols">
                                <div class="container">
                                    <div class="row">
                                        <div class="col align-self-start">
                                            One of three columns
                                        </div>
                                        <div class="col align-self-center">
                                            One of three columns
                                        </div>
                                        <div class="col align-self-end">
                                            One of three columns
                                        </div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="container"&gt;
                                            &lt;div class="row"&gt;
                                                &lt;div class="col align-self-start"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                                &lt;div class="col align-self-center"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                                &lt;div class="col align-self-end"&gt;
                                                    One of three columns
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>

                            <h5 class="mt-5">Horizontal alignment</h5>
                            <hr>
                            <div class="bd-example-row">
                                <div class="container">
                                    <div class="row justify-content-start">
                                        <div class="col-4">
                                            One of two columns
                                        </div>
                                        <div class="col-4">
                                            One of two columns
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="col-4">
                                            One of two columns
                                        </div>
                                        <div class="col-4">
                                            One of two columns
                                        </div>
                                    </div>
                                    <div class="row justify-content-end">
                                        <div class="col-4">
                                            One of two columns
                                        </div>
                                        <div class="col-4">
                                            One of two columns
                                        </div>
                                    </div>
                                    <div class="row justify-content-around">
                                        <div class="col-4">
                                            One of two columns
                                        </div>
                                        <div class="col-4">
                                            One of two columns
                                        </div>
                                    </div>
                                    <div class="row justify-content-between">
                                        <div class="col-4">
                                            One of two columns
                                        </div>
                                        <div class="col-4">
                                            One of two columns
                                        </div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="container"&gt;
                                            &lt;div class="row justify-content-start"&gt;
                                                &lt;div class="col-4"&gt;
                                                    One of two columns
                                                &lt;/div&gt;
                                                &lt;div class="col-4"&gt;
                                                    One of two columns
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class="row justify-content-center"&gt;
                                                &lt;div class="col-4"&gt;
                                                    One of two columns
                                                &lt;/div&gt;
                                                &lt;div class="col-4"&gt;
                                                    One of two columns
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class="row justify-content-end"&gt;
                                                &lt;div class="col-4"&gt;
                                                    One of two columns
                                                &lt;/div&gt;
                                                &lt;div class="col-4"&gt;
                                                    One of two columns
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class="row justify-content-around"&gt;
                                                &lt;div class="col-4"&gt;
                                                    One of two columns
                                                &lt;/div&gt;
                                                &lt;div class="col-4"&gt;
                                                    One of two columns
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class="row justify-content-between"&gt;
                                                &lt;div class="col-4"&gt;
                                                    One of two columns
                                                &lt;/div&gt;
                                                &lt;div class="col-4"&gt;
                                                    One of two columns
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>

                            <h5 class="mt-5">No gutters</h5>
                            <hr>
                            <p>The gutters between columns in our predefined grid classes can be removed with <code class="highlighter-rouge">.no-gutters</code>. This removes the negative <code class="highlighter-rouge">margin</code>s from
                                <code class="highlighter-rouge">.row</code> and the horizontal <code class="highlighter-rouge">padding</code> from all immediate children columns.</p>
                            <p>Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">attribute
                                    selector</a>. While this generates a more specific selector, column padding can still be further customized with <a href="../../../../../docs/4.1/utilities/spacing/index.html">spacing utilities</a>.</p>
                            <p><strong>Need an edge-to-edge design?</strong> Drop the parent <code class="highlighter-rouge">.container</code> or <code class="highlighter-rouge">.container-fluid</code>.</p>
                            <pre>
                                <code class="language-scss">
                                    .no-gutters {
                                        margin-right: 0;
                                        margin-left: 0;

                                        > .col,
                                        > [class*="col-"] {
                                            padding-right: 0;
                                            padding-left: 0;
                                        }
                                    }
                                </code>
                            </pre>
                            <p>In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).</p>
                            <div class="bd-example-row">
                                <div class="row no-gutters">
                                    <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
                                    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="row no-gutters"&gt;
                                            &lt;div class="col-12 col-sm-6 col-md-8"&gt;.col-12 .col-sm-6 .col-md-8&lt;/div&gt;
                                            &lt;div class="col-6 col-md-4"&gt;.col-6 .col-md-4&lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>

                            <h5 class="mt-5">Column wrapping</h5>
                            <hr>
                            <p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p>
                            <div class="bd-example-row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-9">.col-9</div>
                                        <div class="col-4">.col-4
                                            <br />Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
                                        <div class="col-6">.col-6
                                            <br />Subsequent columns continue along the new line.
                                        </div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-9"&gt;.col-9&lt;/div&gt;
                                            &lt;div class="col-4"&gt;.col-4
                                                &lt;br /&gt;Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
                                            &lt;/div&gt;
                                            &lt;div class="col-6"&gt;.col-6
                                                &lt;br /&gt;Subsequent columns continue along the new line.
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>

                            <h5 class="mt-5">Column breaks</h5>
                            <hr>
                            <p>Breaking columns to a new line in flexbox requires a small hack: add an element with <code class="highlighter-rouge">width: 100%</code> wherever you want to wrap your columns to a new line. Normally this is
                                accomplished with multiple
                                <code class="highlighter-rouge">.row</code>s, but not every implementation method can account for this.</p>
                            <div class="bd-example-row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
                                        <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

                                        <div class="w-100"></div>

                                        <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
                                        <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-6 col-sm-3"&gt;.col-6 .col-sm-3&lt;/div&gt;
                                            &lt;div class="col-6 col-sm-3"&gt;.col-6 .col-sm-3&lt;/div&gt;

                                            &lt;!-- Force next columns to break to new line --&gt;
                                            &lt;div class="w-100"&gt;&lt;/div&gt;

                                            &lt;div class="col-6 col-sm-3"&gt;.col-6 .col-sm-3&lt;/div&gt;
                                            &lt;div class="col-6 col-sm-3"&gt;.col-6 .col-sm-3&lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>
                            <p>You may also apply this break at specific breakpoints with our <a href="../../../../../docs/4.1/utilities/display/index.html">responsive display utilities</a>.</p>
                            <div class="bd-example-row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
                                        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

                                        <!-- Force next columns to break to new line at md breakpoint and up -->
                                        <div class="w-100 d-none d-md-block"></div>

                                        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
                                        <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-6 col-sm-4"&gt;.col-6 .col-sm-4&lt;/div&gt;
                                            &lt;div class="col-6 col-sm-4"&gt;.col-6 .col-sm-4&lt;/div&gt;

                                            &lt;!-- Force next columns to break to new line at md breakpoint and up --&gt;
                                            &lt;div class="w-100 d-none d-md-block"&gt;&lt;/div&gt;

                                            &lt;div class="col-6 col-sm-4"&gt;.col-6 .col-sm-4&lt;/div&gt;
                                            &lt;div class="col-6 col-sm-4"&gt;.col-6 .col-sm-4&lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>Reordering</h5>
                        </div>
                        <div class="card-body">
                            <h5>Order classes</h5>
                            <hr>
                            <p>Use <code class="highlighter-rouge">.order-</code> classes for controlling the <strong>visual order</strong> of your content. These classes are responsive, so you can set the <code class="highlighter-rouge">order</code>
                                by breakpoint (e.g., <code class="highlighter-rouge">.order-1.order-md-2</code>). Includes support for <code class="highlighter-rouge">1</code> through <code class="highlighter-rouge">12</code> across all five grid
                                tiers.</p>
                            <div class="bd-example-row">
                                <div class="container">
                                    <div class="row">
                                        <div class="col">
                                            First, but unordered
                                        </div>
                                        <div class="col order-12">
                                            Second, but last
                                        </div>
                                        <div class="col order-1">
                                            Third, but first
                                        </div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="container"&gt;
                                            &lt;div class="row"&gt;
                                                &lt;div class="col"&gt;
                                                    First, but unordered
                                                &lt;/div&gt;
                                                &lt;div class="col order-12"&gt;
                                                    Second, but last
                                                &lt;/div&gt;
                                                &lt;div class="col order-1"&gt;
                                                    Third, but first
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>
                            <p>There are also responsive <code class="highlighter-rouge">.order-first</code> and <code class="highlighter-rouge">.order-last</code> classes that change the <code class="highlighter-rouge">order</code> of an element by
                                applying
                                <code class="highlighter-rouge">order: -1</code> and <code class="highlighter-rouge">order: 13</code> (<code class="highlighter-rouge">order: $columns + 1</code>), respectively. These classes can also be intermixed
                                with the numbered
                                <code class="highlighter-rouge">.order-*</code> classes as needed.</p>

                            <div class="bd-example-row">
                                <div class="container">
                                    <div class="row">
                                        <div class="col order-last">
                                            First, but last
                                        </div>
                                        <div class="col">
                                            Second, but unordered
                                        </div>
                                        <div class="col order-first">
                                            Third, but first
                                        </div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="container"&gt;
                                            &lt;div class="row"&gt;
                                                &lt;div class="col order-last"&gt;
                                                    First, but last
                                                &lt;/div&gt;
                                                &lt;div class="col"&gt;
                                                    Second, but unordered
                                                &lt;/div&gt;
                                                &lt;div class="col order-first"&gt;
                                                    Third, but first
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>

                            <h5 class="mt-5">Offsetting Columns</h5>
                            <hr>
                            <p>You can offset grid columns in two ways: our responsive <code class="highlighter-rouge">.offset-</code> grid classes and our <a href="../../../../../docs/4.1/utilities/spacing/index.html">margin utilities</a>. Grid classes are sized to match
                                columns while margins are more useful for quick layouts where the width of the offset is variable.</p>

                            <h5 class="mt-5">Offset classes</h5>
                            <hr>
                            <p>Move columns to the right using <code class="highlighter-rouge">.offset-md-*</code> classes. These classes increase the left margin of a column by <code class="highlighter-rouge">*</code> columns. For example,
                                <code class="highlighter-rouge">.offset-md-4</code> moves <code class="highlighter-rouge">.col-md-4</code> over four columns.</p>
                            <div class="bd-example-row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-4">.col-md-4</div>
                                        <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
                                        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-md-4"&gt;.col-md-4&lt;/div&gt;
                                            &lt;div class="col-md-4 offset-md-4"&gt;.col-md-4 .offset-md-4&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-md-3 offset-md-3"&gt;.col-md-3 .offset-md-3&lt;/div&gt;
                                            &lt;div class="col-md-3 offset-md-3"&gt;.col-md-3 .offset-md-3&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-md-6 offset-md-3"&gt;.col-md-6 .offset-md-3&lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>

                            <p>In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in <a href="../../../../../docs/4.1/examples/grid/index.html">the grid example</a>.</p>

                            <div class="bd-example-row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
                                        <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
                                        <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-sm-5 col-md-6"&gt;.col-sm-5 .col-md-6&lt;/div&gt;
                                            &lt;div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0"&gt;.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-sm-6 col-md-5 col-lg-6"&gt;.col-sm-6 .col-md-5 .col-lg-6&lt;/div&gt;
                                            &lt;div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0"&gt;.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0&lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>

                            <h5 class="mt-5">Margin utilities</h5>
                            <hr>
                            <p>With the move to flexbox in v4, you can use margin utilities like <code class="highlighter-rouge">.mr-auto</code> to force sibling columns away from one another.</p>

                            <div class="bd-example-row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-4">.col-md-4</div>
                                        <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
                                        <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-auto mr-auto">.col-auto .mr-auto</div>
                                        <div class="col-auto">.col-auto</div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-md-4"&gt;.col-md-4&lt;/div&gt;
                                            &lt;div class="col-md-4 ml-auto"&gt;.col-md-4 .ml-auto&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-md-3 ml-md-auto"&gt;.col-md-3 .ml-md-auto&lt;/div&gt;
                                            &lt;div class="col-md-3 ml-md-auto"&gt;.col-md-3 .ml-md-auto&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-auto mr-auto"&gt;.col-auto .mr-auto&lt;/div&gt;
                                            &lt;div class="col-auto"&gt;.col-auto&lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>Nesting</h5>
                        </div>
                        <div class="card-body">
                            <p>To nest your content with the default grid, add a new <code class="highlighter-rouge">.row</code> and set of <code class="highlighter-rouge">.col-sm-*</code> columns within an existing <code class="highlighter-rouge">.col-sm-*</code>
                                column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).</p>

                            <div class="bd-example-row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm-9">
                                            Level 1: .col-sm-9
                                            <div class="row">
                                                <div class="col-8 col-sm-6">
                                                    Level 2: .col-8 .col-sm-6
                                                </div>
                                                <div class="col-4 col-sm-6">
                                                    Level 2: .col-4 .col-sm-6
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-sm-9"&gt;
                                                Level 1: .col-sm-9
                                                &lt;div class="row"&gt;
                                                    &lt;div class="col-8 col-sm-6"&gt;
                                                        Level 2: .col-8 .col-sm-6
                                                    &lt;/div&gt;
                                                    &lt;div class="col-4 col-sm-6"&gt;
                                                        Level 2: .col-4 .col-sm-6
                                                    &lt;/div&gt;
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>
                            <p>When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins
                                to provide a whole suite of ready-to-use classes for fast responsive layouts.</p>

                            <h5 class="mt-5">Variables</h5>
                            <hr>
                            <p>Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for
                                the custom mixins listed below.</p>
                            <pre>
                                <code class="language-scss">
                                    $grid-columns:      12;
                                    $grid-gutter-width: 30px;

                                    $grid-breakpoints: (
                                        // Extra small screen / phone
                                        xs: 0,
                                        // Small screen / phone
                                        sm: 576px,
                                        // Medium screen / tablet
                                        md: 768px,
                                        // Large screen / desktop
                                        lg: 992px,
                                        // Extra large screen / wide desktop
                                        xl: 1200px
                                    );

                                    $container-max-widths: (
                                        sm: 540px,
                                        md: 720px,
                                        lg: 960px,
                                        xl: 1140px
                                    );
                                </code>
                            </pre>

                            <h5 class="mt-5">Mixins</h5>
                            <hr>
                            <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
                            <pre>
                                <code class="language-scss">
                                    // Creates a wrapper for a series of columns
                                    @include make-row();

                                    // Make the element grid-ready (applying everything but the width)
                                    @include make-col-ready();
                                    @include make-col($size, $columns: $grid-columns);

                                    // Get fancy by offsetting, or changing the sort order
                                    @include make-col-offset($size, $columns: $grid-columns);
                                </code>
                            </pre>

                            <h5 class="mt-5">Example usage</h5>
                            <hr>
                            <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.</p>
                            <pre>
                                <code class="language-scss">
                                    .example-container {
                                        width: 800px;
                                        @include make-container();
                                    }

                                    .example-row {
                                        @include make-row();
                                    }

                                    .example-content-main {
                                        @include make-col-ready();

                                        @include media-breakpoint-up(sm) {
                                            @include make-col(6);
                                        }
                                        @include media-breakpoint-up(lg) {
                                            @include make-col(8);
                                        }
                                    }

                                    .example-content-secondary {
                                        @include make-col-ready();
                                        @include media-breakpoint-up(sm) {
                                            @include make-col(6);
                                        }
                                        @include media-breakpoint-up(lg) {
                                            @include make-col(4);
                                        }
                                    }
                                </code>
                            </pre>

                            <div class="bd-example-row">
                                <div class="example-container">
                                    <div class="example-row">
                                        <div class="example-content-main">Main content</div>
                                        <div class="example-content-secondary">Secondary content</div>
                                    </div>
                                </div>
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class="example-container"&gt;
                                            &lt;div class="example-row"&gt;
                                                &lt;div class="example-content-main"&gt;Main content&lt;/div&gt;
                                                &lt;div class="example-content-secondary"&gt;Secondary content&lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>Customizing the Grid</h5>
                        </div>
                        <div class="card-body">
                            <p>Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.</p>

                            <h5 class="mt-2">Columns and gutters</h5>
                            <hr>
                            <p>The number of grid columns can be modified via Sass variables. <code class="highlighter-rouge">$grid-columns</code> is used to generate the widths (in percent) of each individual column while <code class="highlighter-rouge">$grid-gutter-width</code>
                                allows breakpoint-specific widths that are divided evenly across <code class="highlighter-rouge">padding-left</code> and <code class="highlighter-rouge">padding-right</code> for the column gutters.</p>
                            <pre>
                                <code class="language-scss">
                                    $grid-columns: 12 !default;
                                    $grid-gutter-width: 30px !default;
                                </code>
                            </pre>

                            <h5 class="mt-5">Grid tiers</h5>
                            <hr>
                            <p>Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the <code class="highlighter-rouge">$grid-breakpoints</code> and
                                <code class="highlighter-rouge">$container-max-widths</code> to something like this:</p>
                            <pre>
                                <code class="language-scss">
                                    $grid-breakpoints: (
                                        xs: 0,
                                        sm: 480px,
                                        md: 768px,
                                        lg: 1024px
                                    );

                                    $container-max-widths: (
                                        sm: 420px,
                                        md: 720px,
                                        lg: 960px
                                    );
                                </code>
                            </pre>
                            <p>When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering.
                                Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in <code class="highlighter-rouge">px</code> (not <code class="highlighter-rouge">rem</code>,
                                <code class="highlighter-rouge">em</code>, or <code class="highlighter-rouge">%</code>).</p>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-progress">Progress</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Progress</h5>
                        </div>
                        <div class="card-body">
                            <div class="progress mb-4">
                                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Labels</h5>
                        </div>
                        <div class="card-body">
                            <div class="progress mb-4">
                                <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Height</h5>
                        </div>
                        <div class="card-body">
                            <div class="progress mb-4" style="height: 4px;">
                                <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress mb-4" style="height: 20px;">
                                <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Backgrounds</h5>
                        </div>
                        <div class="card-body">
                            <div class="progress mb-4">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Multiple Bars</h5>
                        </div>
                        <div class="card-body">
                            <div class="progress mb-4">
                                <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Striped</h5>
                        </div>
                        <div class="card-body">
                            <div class="progress mb-4">
                                <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Animated Stripes</h5>
                        </div>
                        <div class="card-body">
                            <div class="progress mb-4">
                                <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
                            </div>
                            <div class="progress mb-4">
                                <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%"></div>
                            </div>
                            <button type="button" class="btn btn-secondary bd-toggle-animated-progress" data-toggle="button" aria-pressed="false">Toggle animation</button>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(".bd-toggle-animated-progress").on("click", function() {
                            $(this).siblings(".progress").find(".progress-bar-striped").toggleClass("progress-bar-animated")
                        })
                    </script>
                </div>
            </div>
            <h2 class="docs-header" id="page-tab">Navs & Tabs</h2>
            <div class="row">
                <div class="col-sm-12">
                    <h5>Basic Tabs</h5>
                    <hr>
                    <div class="datta-example">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active text-uppercase" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <p class="mb-0">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit
                                    butcher retro
                                    keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
                                </p>
                            </div>
                            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                <p class="mb-0">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
                                    farm-to-table
                                    craft beer
                                    twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS
                                    salvia
                                    yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr
                                    butcher vero sint qui sapiente accusamus tattooed echo park.</p>
                            </div>
                            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                                <p class="mb-0">Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer,
                                    iphone
                                    skateboard
                                    locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro
                                    mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <h5 class="mt-4">Basic Pills</h5>
                    <hr>
                    <div class="datta-example">
                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                                <p class="mb-0">Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna
                                    elit commodo
                                    anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
                                </p>
                            </div>
                            <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                                <p class="mb-0">Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation
                                    cillum
                                    id incididunt
                                    elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
                                </p>
                            </div>
                            <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                                <p class="mb-0">Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod
                                    minim
                                    exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit
                                    do
                                    ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco
                                    consectetur
                                    culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <h5 class="mt-4">Vertical Pills</h5>
                    <hr>
                    <div class="datta-example">
                        <div class="row">
                            <div class="col-md-3 col-sm-12">
                                <ul class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                    <li><a class="nav-link text-left active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a></li>
                                    <li><a class="nav-link text-left" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a></li>
                                    <li><a class="nav-link text-left" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a></li>
                                    <li><a class="nav-link text-left" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a></li>
                                </ul>
                            </div>
                            <div class="col-md-9 col-sm-12">
                                <div class="tab-content" id="v-pills-tabContent">
                                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                                        <p class="mb-0">Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua
                                            occaecat quis et
                                            velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt
                                            minim
                                            occaecat.</p>
                                    </div>
                                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                                        <p class="mb-0">Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis
                                            laboris ipsum velit
                                            id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim
                                            consectetur qui.</p>
                                    </div>
                                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                                        <p class="mb-0">Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna
                                            nulla.
                                            Velit et et
                                            proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.</p>
                                    </div>
                                    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                                        <p class="mb-0">Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do.
                                            Aliqua
                                            amet qui
                                            mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-typography">Typography</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Headings</h5>
                        </div>
                        <div class="card-body">
                            <h1>This is a Heading 1</h1>
                            <p class="text-muted mb-4">Suspendisse vel quam malesuada, aliquet sem sit amet, fringilla elit. Morbi tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien nec, varius sem. Curabitur ullamcorper fringilla
                                eleifend. In ut eros hendrerit est consequat posuere et at velit.</p>
                            <div class="clearfix"></div>
                            <h2>This is a Heading 2</h2>
                            <p class="text-muted mb-4">In nec rhoncus eros. Vestibulum eu mattis nisl. Quisque viverra viverra magna nec pulvinar. Maecenas pellentesque porta augue, consectetur facilisis diam porttitor sed. Suspendisse tempor est
                                sodales augue rutrum tincidunt. Quisque a malesuada purus.</p>
                            <div class="clearfix"></div>
                            <h3>This is a Heading 3</h3>
                            <p class="text-muted mb-4">Vestibulum auctor tincidunt semper. Phasellus ut vulputate lacus. Suspendisse ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in
                                tellus.</p>
                            <div class="clearfix"></div>
                            <h4>This is a Heading 4</h4>
                            <p class="text-muted mb-4">Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur egestas, diam arcu fermentum justo, eget ultrices arcu eros vel erat.</p>
                            <div class="clearfix"></div>
                            <h5>This is a Heading 5</h5>
                            <p class="text-muted mb-4">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo
                                dapibus odio. Vivamus pretium nec odio cursus elementum. Suspendisse molestie ullamcorper ornare.
                            </p>
                            <div class="clearfix"></div>
                            <h6>This is a Heading 6</h6>
                            <p class="text-muted mb-0">Donec ultricies, lacus id tempor condimentum, orci leo faucibus sem, a molestie libero lectus ac justo. ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl nisi, feugiat quis
                                bibendum vitae, dapibus in tellus.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Inline Text Elements</h5>
                        </div>
                        <div class="card-body">
                            <p class="lead m-t-0">Your title goes here</p>
                            You can use the mark tag to
                            <mark>highlight</mark> text.
                            <br>
                            <del>This line of text is meant to be treated as deleted text.</del>
                            <br>
                            <ins>This line of text is meant to be treated as an addition to the document.</ins>
                            <br>
                            <strong>rendered as bold text</strong>
                            <br>
                            <em>rendered as italicized text</em>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Contextual Text Colors</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted mb-1">
                                Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
                            </p>
                            <p class="text-primary mb-1">
                                Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                            <p class="text-success mb-1">
                                Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
                            </p>
                            <p class="text-info mb-1">
                                Maecenas sed diam eget risus varius blandit sit amet non magna.
                            </p>
                            <p class="text-warning mb-1">
                                Etiam porta sem malesuada magna mollis euismod.
                            </p>
                            <p class="text-danger mb-1">
                                Donec ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p class="text-dark mb-1">
                                Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Unordered</h5>
                        </div>
                        <div class="card-body">
                            <ul>
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Consectetur adipiscing elit</li>
                                <li>Integer molestie lorem at massa</li>
                                <li>Facilisis in pretium nisl aliquet</li>
                                <li>Nulla volutpat aliquam velit
                                    <ul>
                                        <li>Phasellus iaculis neque</li>
                                        <li>Purus sodales ultricies</li>
                                        <li>Vestibulum laoreet porttitor sem</li>
                                        <li>Ac tristique libero volutpat at</li>
                                    </ul>
                                </li>
                                <li>Faucibus porta lacus fringilla vel</li>
                                <li>Aenean sit amet erat nunc</li>
                                <li>Eget porttitor lorem</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Ordered</h5>
                        </div>
                        <div class="card-body">
                            <ol>
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Consectetur adipiscing elit</li>
                                <li>Integer molestie lorem at massa</li>
                                <li>Facilisis in pretium nisl aliquet</li>
                                <li>Nulla volutpat aliquam velit
                                    <ul>
                                        <li>Phasellus iaculis neque</li>
                                        <li>Purus sodales ultricies</li>
                                        <li>Vestibulum laoreet porttitor sem</li>
                                        <li>Ac tristique libero volutpat at</li>
                                    </ul>
                                </li>
                                <li>Faucibus porta lacus fringilla vel</li>
                                <li>Aenean sit amet erat nunc</li>
                                <li>Eget porttitor lorem</li>
                            </ol>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Unstyled</h5>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled">
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Integer molestie lorem at massa
                                    <ul>
                                        <li>Phasellus iaculis neque</li>
                                    </ul>
                                </li>
                                <li>Faucibus porta lacus fringilla vel</li>
                                <li>Eget porttitor lorem</li>
                            </ul>
                            <h5>Inline</h5>
                            <hr>
                            <ul class="list-inline m-b-0">
                                <li class="list-inline-item">Lorem ipsum</li>
                                <li class="list-inline-item">Phasellus iaculis</li>
                                <li class="list-inline-item">Nulla volutpat</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Blockquotes</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted m-b-30">
                                Your awesome text goes here.
                            </p>
                            <blockquote class="blockquote">
                                <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                            </blockquote>
                            <p class="text-muted m-b-15 m-t-20">
                                Add <code>.text-right</code> for a blockquote with right-aligned content.
                            </p>
                            <blockquote class="blockquote text-right">
                                <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                            </blockquote>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Horizontal Description</h5>
                        </div>
                        <div class="card-body">
                            <dl class="dl-horizontal row">
                                <dt class="col-sm-3">Description lists</dt>
                                <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

                                <dt class="col-sm-3">Euismod</dt>
                                <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                <dd class="col-sm-9">Donec id elit non mi porta gravida at eget metus.</dd>

                                <dt class="col-sm-3">Malesuada porta</dt>
                                <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

                                <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
                                <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-tooltip">Tooltip & Popover</h2>
            <div class="row">
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Tooltip</h5>
                        </div>
                        <div class="card-body">
                            <button type="button" class="btn btn-default " data-toggle="tooltip" data-placement="top" title="tooltip on top">Top</button>
                            <button type="button" class="btn btn-primary  " data-toggle="tooltip" data-placement="left" title="tooltip on left">Left</button>
                            <button type="button" class="btn btn-success  " data-toggle="tooltip" data-placement="right" title="tooltip on right">Right</button>
                            <button type="button" class="btn btn-warning  " data-toggle="tooltip" data-placement="bottom" title="tooltip on bottom">Bottom</button>
                            <button type="button" class="btn btn-info  " data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Html Tooltip</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Popover</h5>
                        </div>
                        <div class="card-body">
                            <button type="button" class="btn btn-default " data-toggle="popover" data-placement="top" title="" data-content="top by popover" data-original-title="tooltip on top">Top</button>
                            <button type="button" class="btn btn-primary  " data-toggle="popover" data-placement="left" title="tooltip on left" data-content="left by popover">Left</button>
                            <button type="button" class="btn btn-success  " data-toggle="popover" data-placement="right" title="tooltip on right" data-content="right by popover">Right</button>
                            <button type="button" class="btn btn-warning  " data-toggle="popover" data-placement="bottom" title="tooltip on bottom" data-content="bottom by popover">Bottom</button>
                            <button type="button" class="btn btn-info  " data-toggle="popover" data-html="true" data-placement="top" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>" data-content="tooltip by HTML">Html Tooltip</button>
                        </div>
                    </div>
                </div>

            </div>
            <h2 class="docs-header" id="page-spinner">Spinner</h2>
            <div class="row">
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Border spinner</h5>
                        </div>
                        <div class="card-body">
                            <div class="spinner-border" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Border spinner [ Colors ]</h5>
                        </div>
                        <div class="card-body">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-border text-secondary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-border text-success" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-border text-danger" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-border text-warning" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-border text-info" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-border text-light" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-border text-dark" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Growing spinner</h5>
                        </div>
                        <div class="card-body">
                            <div class="spinner-grow" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Growing spinner [ Colors ]</h5>
                        </div>
                        <div class="card-body">
                            <div class="spinner-grow text-primary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-grow text-secondary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-grow text-success" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-grow text-danger" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-grow text-warning" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-grow text-info" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-grow text-light" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-grow text-dark" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Placement</h5>
                        </div>
                        <div class="card-body">
                            <h6>Start</h6>
                            <div class="d-flex justify-content-start">
                                <div class="spinner-border" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </div>
                            <hr>
                            <h6>Center</h6>
                            <div class="d-flex justify-content-center">
                                <div class="spinner-border" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </div>
                            <hr>
                            <h6>End</h6>
                            <div class="d-flex justify-content-end">
                                <div class="spinner-border" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Size</h5>
                        </div>
                        <div class="card-body">
                            <h6>Small</h6>
                            <div class="spinner-border spinner-border-sm" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-grow spinner-grow-sm" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <hr>
                            <h6>Custom</h6>
                            <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h5>Buttons</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <button class="btn btn-primary" type="button" disabled>
                                        <span class="spinner-border spinner-border-sm" role="status"></span>
                                        <span class="sr-only">Loading...</span>
                                    </button>
                                    <button class="btn btn-primary" type="button" disabled>
                                        <span class="spinner-border spinner-border-sm" role="status"></span>
                                        Loading...
                                    </button>
                                </div>
                                <div class="row col-sm-6">
                                    <button class="btn btn-primary" type="button" disabled>
                                        <span class="spinner-grow spinner-grow-sm" role="status"></span>
                                        <span class="sr-only">Loading...</span>
                                    </button>
                                    <button class="btn btn-primary" type="button" disabled>
                                        <span class="spinner-grow spinner-grow-sm" role="status"></span>
                                        Loading...
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-toasts">Toasts</h2>
            <div class="row">
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Toasts</h5>
                        </div>
                        <div class="card-body">
                            <div class="bg-light p-4 mb-2" style="height:150px;">
                                <div class="toast hide toast-1" role="alert" aria-live="assertive" aria-atomic="true">
                                    <div class="toast-header">
                                        <img src="assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                        <strong class="mr-auto">Bootstrap</strong>
                                        <small>11 mins ago</small>
                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                            <span>&times;</span>
                                        </button>
                                    </div>
                                    <div class="toast-body">
                                        Hello, world! This is a toast message.
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary" onclick="$('.toast-1').toast('show')">click</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Translucent</h5>
                        </div>
                        <div class="card-body">
                            <div class="bg-dark p-4 mb-2" style="height:150px;">
                                <div class="toast hide toast-2" role="alert" aria-live="assertive" aria-atomic="true">
                                    <div class="toast-header">
                                        <img src="assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                        <strong class="mr-auto">Bootstrap</strong>
                                        <small class="text-muted">11 mins ago</small>
                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                            <span>&times;</span>
                                        </button>
                                    </div>
                                    <div class="toast-body">
                                        Hello, world! This is a toast message.
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary" onclick="$('.toast-2').toast('show')">click</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Stacking</h5>
                        </div>
                        <div class="card-body">
                            <div class="bg-light p-4 mb-2" style="height:250px;">
                                <div class="toast hide toast-3" role="alert" aria-live="assertive" aria-atomic="true">
                                    <div class="toast-header">
                                        <img src="assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                        <strong class="mr-auto">Bootstrap</strong>
                                        <small class="text-muted">11 mins ago</small>
                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                            <span>&times;</span>
                                        </button>
                                    </div>
                                    <div class="toast-body">
                                        Hello, world! This is a toast message.
                                    </div>
                                </div>
                                <div class="toast hide toast-3" role="alert" aria-live="assertive" aria-atomic="true">
                                    <div class="toast-header">
                                        <img src="assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                        <strong class="mr-auto">Bootstrap</strong>
                                        <small class="text-muted">11 mins ago</small>
                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                            <span>&times;</span>
                                        </button>
                                    </div>
                                    <div class="toast-body">
                                        Hello, world! This is a toast message.
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary" onclick="$('.toast-3').toast('show')">click</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>data-delay</h5>
                        </div>
                        <div class="card-body">
                            <div class="bg-light p-4 mb-2" style="height:250px;">
                                <div class="toast hide toast-1s" role="alert" aria-live="assertive" data-delay="1000" aria-atomic="true">
                                    <div class="toast-header">
                                        <img src="assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                        <strong class="mr-auto">Bootstrap 1s</strong>
                                        <small class="text-muted">11 mins ago</small>
                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                            <span>&times;</span>
                                        </button>
                                    </div>
                                    <div class="toast-body">
                                        Hello, world! This is a toast message.
                                    </div>
                                </div>
                                <div class="toast hide toast-3s" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
                                    <div class="toast-header">
                                        <img src="assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                        <strong class="mr-auto">Bootstrap 3s</strong>
                                        <small class="text-muted">11 mins ago</small>
                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                            <span>&times;</span>
                                        </button>
                                    </div>
                                    <div class="toast-body">
                                        Hello, world! This is a toast message.
                                    </div>
                                </div>
                                <div class="toast hide toast-5s" role="alert" aria-live="assertive" data-delay="5000" aria-atomic="true">
                                    <div class="toast-header">
                                        <img src="assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                        <strong class="mr-auto">Bootstrap 5s</strong>
                                        <small class="text-muted">11 mins ago</small>
                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                            <span>&times;</span>
                                        </button>
                                    </div>
                                    <div class="toast-body">
                                        Hello, world! This is a toast message.
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary" onclick="$('.toast-1s').toast('show')">1 sec</button>
                            <button class="btn btn-primary" onclick="$('.toast-3s').toast('show')">3 sec</button>
                            <button class="btn btn-primary" onclick="$('.toast-5s').toast('show')">5 sec</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Placement</h5>
                        </div>
                        <div class="card-body">
                            <div class="position-relative bg-light p-4 mb-2" style="height:300px;">
                                <div style="position:absolute;top:40px;left:40px">
                                    <div class="toast hide toast-left" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
                                        <div class="toast-header">
                                            <img src="assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                            <strong class="mr-auto">Bootstrap</strong>
                                            <small class="text-muted">11 mins ago</small>
                                            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                <span>&times;</span>
                                            </button>
                                        </div>
                                        <div class="toast-body">
                                            Hello, world! This is a toast message.
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-center" style="position:absolute;top:40px;left:40px;right:40px">
                                    <div class="toast hide toast-center" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
                                        <div class="toast-header">
                                            <img src="assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                            <strong class="mr-auto">Bootstrap</strong>
                                            <small class="text-muted">11 mins ago</small>
                                            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                <span>&times;</span>
                                            </button>
                                        </div>
                                        <div class="toast-body">
                                            Hello, world! This is a toast message.
                                        </div>
                                    </div>
                                </div>
                                <div style="position:absolute;top:40px;right: 40px">
                                    <div class="toast hide toast-right" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
                                        <div class="toast-header">
                                            <img src="assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                            <strong class="mr-auto">Bootstrap</strong>
                                            <small class="text-muted">11 mins ago</small>
                                            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                <span>&times;</span>
                                            </button>
                                        </div>
                                        <div class="toast-body">
                                            Hello, world! This is a toast message.
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-center align-items-center" style="min-height:100%;position:absolute;top:0px;right: 0px;left:0">
                                    <div class="toast hide toast-align-center" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
                                        <div class="toast-header">
                                            <img src="assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                            <strong class="mr-auto">Bootstrap</strong>
                                            <small class="text-muted">11 mins ago</small>
                                            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                <span>&times;</span>
                                            </button>
                                        </div>
                                        <div class="toast-body">
                                            Hello, world! This is a toast message.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary" onclick="$('.toast-left').toast('show')">Left</button>
                            <button class="btn btn-primary" onclick="$('.toast-center').toast('show')">Center</button>
                            <button class="btn btn-primary" onclick="$('.toast-right').toast('show')">Right</button>
                            <button class="btn btn-primary" onclick="$('.toast-align-center').toast('show')">Center Align</button>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-border">Border</h2>
            <div class="row">
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Additive</h5>
                        </div>
                        <div class="card-body">
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border" data-toggle="tooltip" title="border"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border-top" data-toggle="tooltip" title="border-top"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border-right" data-toggle="tooltip" title="border-right"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border-bottom" data-toggle="tooltip" title="border-bottom"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border-left" data-toggle="tooltip" title="border-left"></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Subtractive</h5>
                        </div>
                        <div class="card-body">
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-0" data-toggle="tooltip" title="border border-0"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-top-0" data-toggle="tooltip" title="border border-top-0"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-right-0" data-toggle="tooltip" title="border border-right-0"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-bottom-0" data-toggle="tooltip" title="border border-bottom-0"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-left-0" data-toggle="tooltip" title="border border-left-0"></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Border color</h5>
                        </div>
                        <div class="card-body">
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-primary" data-toggle="tooltip" title="border-primary"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary" data-toggle="tooltip" title="border-secondary"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-success" data-toggle="tooltip" title="border-success"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-danger" data-toggle="tooltip" title="border-danger"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-warning" data-toggle="tooltip" title="border-warning"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-info" data-toggle="tooltip" title="border-info"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-light" data-toggle="tooltip" title="border-light"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-dark" data-toggle="tooltip" title="border-dark"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-white" data-toggle="tooltip" title="border-white"></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Border-radius</h5>
                        </div>
                        <div class="card-body">
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded" data-toggle="tooltip" title="rounded"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded-top" data-toggle="tooltip" title="rounded-top"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded-right" data-toggle="tooltip" title="rounded-right"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded-bottom" data-toggle="tooltip" title="rounded-bottom"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded-left" data-toggle="tooltip" title="rounded-left"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded-circle" data-toggle="tooltip" title="rounded-circle"></span>
                            <span class="hei-75 wid-120 bg-light d-inline-block mr-2 border border-secondary rounded-pill" data-toggle="tooltip" title="rounded-pill"></span>
                            <span class="hei-75 wid-75 bg-light d-inline-block mr-2 border border-secondary rounded-0" data-toggle="tooltip" title="rounded-0"></span>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-extra">Extra</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Shadows</h5>
                        </div>
                        <div class="card-body">
                            <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
                            <div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
                            <div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
                            <div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Embeds</h5>
                        </div>
                        <div class="card-body">
                            <div class="row justify-content-center">
                                <div class="col-md-8">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IkyZHPnfFnE?rel=0" allowfullscreen></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Aspect Ratios</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="mt-3">Aspect Ratios 21by9</h5>
                                    <hr>
                                    <div class="embed-responsive embed-responsive-21by9">
                                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IkyZHPnfFnE?rel=0" allowfullscreen></iframe>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mt-3">Aspect Ratios 16by9</h5>
                                    <hr>
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IkyZHPnfFnE?rel=0" allowfullscreen></iframe>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mt-3">Aspect Ratios 4by3</h5>
                                    <hr>
                                    <div class="embed-responsive embed-responsive-4by3">
                                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IkyZHPnfFnE?rel=0" allowfullscreen></iframe>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mt-3">Aspect Ratios 1by1</h5>
                                    <hr>
                                    <div class="embed-responsive embed-responsive-1by1">
                                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IkyZHPnfFnE?rel=0" allowfullscreen></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="datta-example-modal">
        <a href="javascript:void(0)" class="md-datta-example-modal-copy">
            <span class="feather icon-clipboard"></span>
        </a>
        <a href="javascript:void(0)" class="datta-example-modal-close">&times;</a>
        <div class="scroll-div">
            <div class="datta-example-modal-content"></div>
        </div>
    </div>


    <script src="assets/js/uikit.min.js"></script>

    <script>
        $(function() {
            $('body').scrollspy({
                target: ".docs-sections-inner"
            });
            $(document).on('scroll', function() {
                var top = $(document).scrollTop();
                var left = $(document).scrollLeft();
                $('.docs-sections')[0].style.top = (top > 70 ? 0 : 70 - top) + 'px';
                $('.docs-sections')[0].style.left = (left * -1) + 'px';
            });
            $(document).ready(function() {
                var top = $(document).scrollTop();
                var left = $(document).scrollLeft();
                $('.docs-sections')[0].style.top = (top > 70 ? 0 : 70 - top) + 'px';
                $('.docs-sections')[0].style.left = (left * -1) + 'px';
            });

            $(".docs-sections-inner a").on('click', function(event) {
                if (this.hash !== "") {
                    event.preventDefault();
                    var hash = this.hash;
                    $('html, body').animate({
                        scrollTop: $(hash).offset().top
                    }, 1500, function() {
                        window.location.hash = hash;
                    });
                }
            });
            
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();

        });
    </script>

</body>

</html>
